<template>
	<!-- 步骤条 -->
	<view class="steps">
		<view class="steps-item">
			<view class="">
				<view class="radius take flex">
					{{take}}
				</view>
				<view class="line"></view>
				<view class="radius deliver flex">
					送
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				take: '取'
			}
		}
	}
</script>

<style lang="less" scoped>
	.steps {
		.flex {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.steps-item {
			width: 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 48rpx;
			// 圆
			.radius {
				width: 38rpx;
				height: 38rpx;
				border-radius: 50%;
			}
			// 取
			.take {
				background: #F14500;
			}
			.line {
				width: 2rpx;
				height: 53rpx;
				border-left: 2px dashed #898989;
				margin: 10rpx 15rpx;
			}
			// 送
			.deliver {
				background: #EECD5C;
			}
		}
	}
</style>